<template>
    <div class="container">
		<!-- 小球 并且要设置钩子函数的动画，因为只有半场动画-->
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
			<div class="ball" v-show="flag" ref="ball2"></div>
		</transition>
		<!-- <div class="ball" v-show="flag"></div> -->
       <div class="mui-card">
		   <!-- 轮播图 -->
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotu="lunbotu" :isfull="false"></swiper>
					</div>
				</div>
		</div>
        <div class="mui-card">
			<!-- 商品购买情况 -->
				<div class="mui-card-header">{{info.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					    <p class="price">市场价：<del>￥{{info.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now">￥{{info.sell_price}}</span></p>
						<p class="number">购买数量：<numbox @countnum="getcountnum" :maxnum="info.stock_quantity"></numbox></p>
						<!-- <p class="number">购买数量：<numbox ref="mynumbox"></numbox></p> -->
						<p>
							<mt-button type="primary" size="small">立即购买</mt-button>
							<mt-button type="danger" size="small" @click="shopcar">加入购物车</mt-button>
						</p>
								 
					</div>
				</div>
		</div>
        <div class="mui-card">
			<!-- 商品参数 -->
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{info.goods_no}}</p>
						<p>库存情况：{{info.stock_quantity}}</p>
						<p>上架时间：{{info.add_time | dataFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<!-- 下面这里用br实现不了分行，因为有display:flex; 因此要分行只要把display设置为block即可 -->
					<mt-button type="primary" size="large" plain @click="getdes(id)">图文介绍</mt-button>
					<mt-button type="danger" size="large" plain class="btn2" @click="getcom(id)">商品评论</mt-button>
				</div>
		</div>
       
       
    </div>
</template>
<script>
import swiper from '../subcomponent/swiper.vue'
import numbox from '../subcomponent/numbox.vue'
export default {
    data(){
		return {
			lunbotu:[],
			id:this.$route.params.id,
			info:{},
			flag:false,
			countnum:1
		}
	},
	created(){
		this.getlunbo(),
		this.getinfo()
	},
	methods:{
		// 获取轮播图数据
		getlunbo(){
			this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id)
			.then(result =>{
				if(result.body.status===0){
					result.body.message.forEach(element => {
						element.img=element.src
					})
					this.lunbotu=result.body.message
					console.log(this.lunbotu)
				}
			})
		},
		// 获取商品信息
		getinfo(){
			this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/'+this.id)
			.then(result => {
				console.log(result.body.message)
				if(result.body.status===0){
					// 因为有传id值，因此每次获得的都是[{id:a,...}]
					this.info=result.body.message[0]
				}
			})
		},
		// 编程式跳转
		getdes(id){
          this.$router.push({name:'des',params:{id}})
		},
		getcom(id){
			this.$router.push({name:'com',params:{id}})

		},
		// 加入购物车
		shopcar(){
			//小球设置显隐
			this.flag=!this.flag
			// this.countnum=this.$refs.mynumbox.value
			// console.log(this.countnum)

		},
		// // // 动画效果
		beforeEnter(el){//进入前
			el.style.transform="translate(0,0)"
		},
		enter(el,done){//进入后,就是结束的时候
			el.offsetWidth
			// 动态获取坐标
			// 获取小球位置
			const ballposition=this.$refs.ball2.getBoundingClientRect()
			// 获取徽标位置
			const badgeposition=document.getElementById('badge').getBoundingClientRect()
			// 两者的距离
			const xdist=badgeposition.left-ballposition.left
			const ydist=badgeposition.top-ballposition.top
			// el.style.transform="translate(93px,230px)"
			// 下面是es6的字符串的拼接写法
			el.style.transform=`translate(${xdist}px,${ydist}px)`
			el.style.transition="all 1s ease"
			done()
		},
		afterEnter(){//结束后
			this.flag=!this.flag
		},
		// 一开始这只是一个更改data中countnum的方法，把参数赋给countnum
		// 把子组件的数量传到父组件中，并且挂到data中去
		getcountnum(count){
			this.countnum=count
			console.log(this.countnum)
		}
	


	},
		
	components:{
		swiper,
		numbox
	}

}
</script>
<style lang="scss" scoped>
.container{
    background-color: #ccc;
    overflow: hidden;
	.now{
		color: red;
		font-size: 16px;
		font-weight: 700;
	}
	.mui-card-footer{
		display: block;
		button{
			margin-top: 10px;
		}
	}
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		z-index: 99;
		top: 390px;
		left: 146px;
		// transform: translate(50px,39px)
	}
}
</style>